<template>
	<div>
        <div style='background: #fff' v-if='engine==1'>
            <div class='content-title'>云函数</div>
            <div style='padding:35px 20px'>
                <button class='btn btn-hover' @click='addFun'>创建函数</button>
                <div style="padding:1px">
                    <Table :columns="funList" :data="funData" stripe></Table>
                </div>
                <div style='overflow: hidden'>
                    <Page :total="pagination.rowCount" :page-size='pagination.pageSize' style='float: right;margin: 20px 0;' @on-change='changePage'></Page>
                </div>
            </div>
            <!-- 创建函数 -->
            <Modal v-model="modal" width="600" :styles='{top:"20px"}'>
                <p slot="header">
                    <span>{{editId ? '编辑函数' : '创建函数'}}</span>
                </p>
                <div style='margin-bottom: 24px'>
                    <Form :label-width='70'>
                        <FormItem label='分组' v-show='funType!="Global"'>
                            <p slot='label'><span class='star'>*</span>分组</p>
                            <Select v-model='formItem.classId'>
                                <Option v-for="item in configData" :value="item.id" :key="item.id">{{ item.name }}</Option>
                            </Select>
                        </FormItem>
                        <RadioGroup v-model='funType' style='margin-bottom:20px' >
                            <Radio label="Function" :disabled='editId!=0'></Radio>
                            <Radio label="Hook" :disabled='editId!=0'></Radio>
                            <Radio label="Global" :disabled='editId!=0'></Radio>
                        </RadioGroup>
                        <FormItem label='数据表' v-show='funType=="Hook"'>
                            <Select v-model='formItem.table' placeholder='全部'>
                                <Option value=''>全部</Option>
                                <Option v-for="item in tableData.table" :value="item.Name" :key="item"></Option>
                            </Select>
                        </FormItem>
                    </Form>
                    <p style='font-size: 16px;line-height: 30px;overflow:hidden'>
                        <span v-show='funType!="Global"'>
                             async function 
                            <input v-model='formItem.name' placeholder="funcName" type="text" class='func-name' v-show='funType=="Function"'>
                         (ctx, next, module<!-- <span v-show='funType=="Global"'>, <input v-model='formItem.argv' placeholder="参数如a,b,c" type="text" class='func-name'></span> -->  ) {
                        </span>
                       
                        <i class='iconfont icon-quanping' style='font-size:28px;float:right;color:#80848f;cursor:pointer;' @click='expandCode'></i>
                     </p>
                    <div style='height:300px;margin-top:10px;font-size:20px;' ref='codemirrors'>
                        <codemirror v-model="body" :options="editorOptions"></codemirror>
                    </div>
                    <p style='font-size: 16px;line-height: 30px' v-show='funType!="Global"'>}</p>
                    <Input v-model='formItem.remark' style='margin-top: 30px' placeholder='备注'></Input>
                </div>
                <div slot="footer">
                    <button class='btn-cancel' @click="cancel">取消</button>
                    <button class='btn-sure' @click="sure">确认</button>
                </div>
            </Modal>
            <div v-if='code_modal' class='code-modal'>
                <div class='codemirror'>
                    <div class='codemirror-head'>
                    <!-- 主题 -->
                        <Dropdown class='codemirror-head-dropdown' trigger='click' @on-click='selectTheme'>
                            <div style='color:#fff;font-size:14px'>
                                <span><i class='iconfont icon-yansezhuanhuan codemirror-head-icon'></i>{{theme}}</span>
                                <Icon type="arrow-down-b" style='margin-left: 2px'></Icon>
                            </div>
                            <DropdownMenu slot="list" class='codemirror-head-dropdownmenu'>
                                <DropdownItem :name='item.name' v-for='item in themeData' :key='item'>{{item.name}}</DropdownItem>
                            </DropdownMenu>
                        </Dropdown>
                        <!-- 字体大小 -->
                         <Dropdown class='codemirror-head-dropdown' trigger='click' @on-click='fontSizes'>
                            <div style='color:#fff;font-size:14px'>
                                <span><i class='iconfont icon-t codemirror-head-icon'></i>{{font}}</span>
                                <Icon type="arrow-down-b" style='margin-left: 2px'></Icon>
                            </div>
                            <DropdownMenu slot="list" style='width:140px;'>
                                <DropdownItem :name='item.font' v-for='item in fonts' :key='item'>{{item.font}}</DropdownItem>
                            </DropdownMenu>
                        </Dropdown>

                        <Dropdown class='codemirror-head-dropdown' trigger='click' @on-click='selectLanguage'>
                            <div style='color:#fff;font-size:14px'>
                                <span><i class='iconfont icon-shezhi codemirror-head-icon'></i>{{language}}</span>
                                <Icon type="arrow-down-b" style='margin-left: 2px'></Icon>
                            </div>
                            <DropdownMenu slot="list" class='codemirror-head-dropdownmenu'>
                                <DropdownItem :name='item.mime' v-for='item in languageData' :key='item'>{{item.name}}</DropdownItem>
                            </DropdownMenu>
                        </Dropdown>

                        <i class='iconfont icon-close icon-closed' @click='codeCancel'></i>
                    </div>
                    <div style='height:100%' ref='codemirrors'>
                        <codemirror v-model="body" :options="editorOptions"></codemirror>
                    </div>
                    
                </div>
            </div>
        </div>  
        <div v-else>
            <Engine @openEngine='openEngine'></Engine>
        </div>
         
    </div>
</template>
<script type="text/javascript">
    import { codemirror,CodeMirror } from 'vue-codemirror'
    import axios from 'axios'
     // language
      import 'codemirror/mode/javascript/javascript.js'
      import 'codemirror/mode/python/python.js'
      import 'codemirror/mode/php/php.js'
      // theme css
      import 'codemirror/theme/monokai.css'
      import 'codemirror/theme/3024-day.css'
      // require active-line.js
      import'codemirror/addon/selection/active-line.js'
      // styleSelectedText
      import'codemirror/addon/selection/mark-selection.js'
      import'codemirror/addon/search/searchcursor.js'
      // hint
      import'codemirror/addon/hint/show-hint.js'
      import'codemirror/addon/hint/show-hint.css'
      import'codemirror/addon/hint/javascript-hint.js'
      import'codemirror/addon/hint/html-hint.js'
      import'codemirror/addon/hint/css-hint.js'
      import'codemirror/addon/hint/anyword-hint.js'
      import'codemirror/addon/selection/active-line.js'
      // highlightSelectionMatches
      import'codemirror/addon/scroll/annotatescrollbar.js'
      import'codemirror/addon/search/matchesonscrollbar.js'
      import'codemirror/addon/search/searchcursor.js'
      import'codemirror/addon/search/match-highlighter.js'
      // keyMap
      import'codemirror/mode/clike/clike.js'
      import'codemirror/addon/edit/matchbrackets.js'
      import'codemirror/addon/comment/comment.js'
      import'codemirror/addon/dialog/dialog.js'
      import'codemirror/addon/dialog/dialog.css'
      import'codemirror/addon/search/searchcursor.js'
      import'codemirror/addon/search/search.js'
      import'codemirror/keymap/sublime.js'
      // foldGutter
      import'codemirror/addon/fold/foldgutter.css'
      import'codemirror/addon/fold/brace-fold.js'
      import'codemirror/addon/fold/comment-fold.js'
      import'codemirror/addon/fold/foldcode.js'
      import'codemirror/addon/fold/foldgutter.js'
      import'codemirror/addon/fold/indent-fold.js'
      import'codemirror/addon/fold/markdown-fold.js'
      import'codemirror/addon/fold/xml-fold.js'
	  import Engine from './engine.vue'
    export default{
        components: {
            codemirror,
            Engine
          },
		data(){
			return{
                engine:1,
                code_modal:false,
                editorOptions: {
                    tabSize: 4,
                    autofocus: true,
                    styleActiveLine: false,
                    lineNumbers: true,
                    lineWrapping:true,
                    styleSelectedText: false,
                    line: true,
                    foldGutter: true,
                    gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
                    highlightSelectionMatches: { showToken: /\w/, annotateScrollbar: true },
                    mode: 'text/javascript',
                    // hint.js options
                    hintOptions:{
                      // 当匹配只有一项的时候是否自动补全
                      completeSingle: false
                    },
                    //快捷键 可提供三种模式 sublime、emacs、vim
                    keyMap: "sublime",
                    matchBrackets: true,
                    showCursorWhenSelecting: true,
                    theme: "monokai",
                    extraKeys: { 
                        "Ctrl": "autocomplete",
                        "Ctrl-S": ()=> {
                            this.code_modal = false
                        }
                    }
                },
				modal:false,
                funType:'Function',
				funList: [
                    {
                        title: '类型',
                        key: 'type'
                    },
                    {
                        title: '函数',
                        key: 'name',
                        render:(h,params)=>{
                            if(params.row.type == 'Function'){
                                return h('span',params.row.name)
                            }
                            if(params.row.type == 'Hook'){
                                return h('span',params.row.table)
                            }
                            if(params.row.type == 'Global'){
                                return h('span',params.row.name)
                            }
                            
                        }
                    },
                    {
                        title: '分组',
                        key: 'class',
                        render: (h, params) => {
                            if(params.row.class_id){
                                return h('div', [
                                    h('span', params.row.class.name)
                                ]);
                            }else{
                                return '';
                            }
                            
                        }
                    },
                    {
                        title: '备注',
                        key: 'remark'
                    },
                    {
                        title: '最后修改',
                        key: 'updated_at',
                        render: (h, params) => {
                            return h('div', [
                                h('span', this.format(params.row.updated_at))
                            ]);
                        }
                    },
                    {
                        title: '操作',
                        key: 'action',
                        render: (h, params) => {
                            return h('div', [
                                h('span', {
                                    style: {
                                        color:'#06A0FD',
                                        cursor:'pointer',
                                        marginRight:'8px'
                                    },
                                    on: {
                                        click: () => {
                                            this.edit(params.row)
                                        }
                                    }
                                }, '编辑'),
                                h('span', {
                                    style: {
                                        color:'#06A0FD',
                                        cursor:'pointer'
                                    },
                                    on: {
                                        click: () => {
                                            this.del(params.row)
                                        }
                                    }
                                }, '删除')
                            ]);
                        }
                    }
                ],
                funData: [],
                pagination:{},
                currentPage:1,
                formItem:{
                    classId:'',
                    name:'',
                    remark:'',
                    table:'',
                    // argv:''
                },
                body:' ',
                configData:[],
                editId:0,
                fonts:[
                    {font:'12px'},
                    {font:'13px'},
                    {font:'14px'},
                    {font:'15px'},
                    {font:'16px'},
                    {font:'18px'},
                    {font:'20px'},
                    {font:'24px'},
                    {font:'28px'},
                    {font:'30px'},
                    {font:'32px'}
                ],
                font:'20px',
                themeData:[
                    {name:'monokai'},
                    {name:'default'},
                    {name:'3024-day'},
                    {name:'3024-night'},
                    {name:'abcdef'},
                    {name:'ambiance'},
                    {name:'base16-dark'},
                    {name:'base16-light'},
                    {name:'bespin'},
                    {name:'blackboard'},
                    {name:'cobalt'},
                    {name:'colorforth'},
                    {name:'dracula'},
                    {name:'duotone-dark'},
                    {name:'duotone-light'},
                    {name:'elegant'},
                    {name:'erlang-dark'},
                    {name:'hopscotch'},
                    {name:'icecoder'},
                    {name:'isotope'},
                    {name:'lesser-dark'},
                    {name:'liquibyte'},
                    {name:'material'},
                    {name:'mbo'},
                    {name:'mdn-like'},
                    {name:'midnight'},
                    {name:'neat'},
                    {name:'neo'},
                    {name:'night'},
                    {name:'panda-syntax'},
                    {name:'paraiso-dark'},
                    {name:'paraiso-light'},
                    {name:'pastel-on-dark'},
                    {name:'railscasts'},
                    {name:'seti'},
                    {name:'solarized dark'},
                    {name:'solarized light'},
                    {name:'the-matrix'},
                    {name:'tomorrow-night-bright'},
                    {name:'tomorrow-night-eighties'},
                    {name:'ttcn'},
                    {name:'twilight'},
                    {name:'vibrant-ink'},
                    {name:'xq-dark'},
                    {name:'xq-light'},
                    {name:'yeti'},
                    {name:'zenburn'}
                ],
                theme:'monokai',
                language:'JavaScript',
                languageData:[
                    {name: "APL", mime: "text/apl"},
                    {name: "ASN.1", mime: "text/x-ttcn-asn"},
                    {name: "Asterisk", mime: "text/x-asterisk"},
                    {name: "C", mime: "text/x-csrc"},
                    {name: "C++", mime: "text/x-c++src"},
                    {name: "Cobol", mime: "text/x-cobol"},
                    {name: "C#", mime: "text/x-csharp"},
                    {name: "Clojure", mime: "text/x-clojure"},
                    {name: "ClojureScript", mime: "text/x-clojurescript"},
                    {name: "Closure Stylesheets (GSS)", mime: "text/x-gss"},
                    {name: "CMake", mime: "text/x-cmake"},
                    {name: "CoffeeScript", mime: "application/vnd.coffeescript"},
                    {name: "Common Lisp", mime: "text/x-common-lisp"},
                    {name: "Cypher", mime: "application/x-cypher-query"},
                    {name: "Cython", mime: "text/x-cython"},
                    {name: "Crystal", mime: "text/x-crystal"},
                    {name: "CSS", mime: "text/css"},
                    {name: "CQL", mime: "text/x-cassandra"},
                    {name: "D", mime: "text/x-d"},
                    {name: "Dart", mime: "application/dart"},
                    {name: "diff", mime: "text/x-diff"},
                    {name: "Django", mime: "text/x-django"},
                    {name: "Dockerfile", mime: "text/x-dockerfile"},
                    {name: "DTD", mime: "application/xml-dtd"},
                    {name: "Dylan", mime: "text/x-dylan"},
                    {name: "EBNF", mime: "text/x-ebnf"},
                    {name: "ECL", mime: "text/x-ecl"},
                    {name: "edn", mime: "application/edn"},
                    {name: "Eiffel", mime: "text/x-eiffel"},
                    {name: "Elm", mime: "text/x-elm"},
                    {name: "Embedded Javascript", mime: "application/x-ejs"},
                    {name: "Embedded Ruby", mime: "application/x-erb"},
                    {name: "Erlang", mime: "text/x-erlang"},
                    {name: "Esper", mime: "text/x-esper"},
                    {name: "Factor", mime: "text/x-factor"},
                    {name: "FCL", mime: "text/x-fcl"},
                    {name: "Forth", mime: "text/x-forth"},
                    {name: "Fortran", mime: "text/x-fortran"},
                    {name: "F#", mime: "text/x-fsharp"},
                    {name: "Gas", mime: "text/x-gas"},
                    {name: "Gherkin", mime: "text/x-feature"},
                    {name: "GitHub Flavored Markdown", mime: "text/x-gfm"},
                    {name: "Go", mime: "text/x-go"},
                    {name: "Groovy", mime: "text/x-groovy"},
                    {name: "HAML", mime: "text/x-haml"},
                    {name: "Haskell", mime: "text/x-haskell"},
                    {name: "Haskell (Literate)", mime: "text/x-literate-haskell"},
                    {name: "Haxe", mime: "text/x-haxe"},
                    {name: "HXML", mime: "text/x-hxml"},
                    {name: "ASP.NET", mime: "application/x-aspx"},
                    {name: "HTML", mime: "text/html", mode: "htmlmixed"},
                    {name: "HTTP", mime: "message/http"},
                    {name: "IDL", mime: "text/x-idl"},
                    {name: "Pug", mime: "text/x-pug"},
                    {name: "Java", mime: "text/x-java"},
                    {name: "Java Server Pages", mime: "application/x-jsp"},
                    {name: "JavaScript", mime:"text/javascript"},
                    {name: "JSON", mime: "application/json"},
                    {name: "JSON-LD", mime: "application/ld+json"},
                    {name: "JSX", mime: "text/jsx"},
                    {name: "Jinja2", mime: "null"},
                    {name: "Julia", mime: "text/x-julia"},
                    {name: "Kotlin", mime: "text/x-kotlin"},
                    {name: "LESS", mime: "text/x-less"},
                    {name: "LiveScript", mime: "text/x-livescript"},
                    {name: "Lua", mime: "text/x-lua"},
                    {name: "Markdown", mime: "text/x-markdown"},
                    {name: "mIRC", mime: "text/mirc"},
                    {name: "MariaDB SQL", mime: "text/x-mariadb"},
                    {name: "Mathematica", mime: "text/x-mathematica"},
                    {name: "Modelica", mime: "text/x-modelica"},
                    {name: "MUMPS", mime: "text/x-mumps"},
                    {name: "MS SQL", mime: "text/x-mssql"},
                    {name: "mbox", mime: "application/mbox"},
                    {name: "MySQL", mime: "text/x-mysql"},
                    {name: "Nginx", mime: "text/x-nginx-conf"},
                    {name: "NSIS", mime: "text/x-nsis"},
                    {name: "NTriples", mime: "application/n-triples"},
                    {name: "Objective-C", mime: "text/x-objectivec"},
                    {name: "OCaml", mime: "text/x-ocaml"},
                    {name: "Octave", mime: "text/x-octave"},
                    {name: "Oz", mime: "text/x-oz"},
                    {name: "Pascal", mime: "text/x-pascal"},
                    {name: "PEG.js", mime: "null"},
                    {name: "Perl", mime: "text/x-perl"},
                    {name: "PGP", mime: "application/pgp"},
                    {name: "PHP", mime: "application/x-httpd-php"},
                    {name: "Pig", mime: "text/x-pig"},
                    {name: "Plain Text", mime: "text/plain"},
                    {name: "PLSQL", mime: "text/x-plsql"},
                    {name: "PowerShell", mime: "application/x-powershell"},
                    {name: "Properties files", mime: "text/x-properties"},
                    {name: "ProtoBuf", mime: "text/x-protobuf"},
                    {name: "Python", mime: "text/x-python"},
                    {name: "Puppet", mime: "text/x-puppet"},
                    {name: "Q", mime: "text/x-q"},
                    {name: "R", mime: "text/x-rsrc"},
                    {name: "reStructuredText", mime: "text/x-rst"},
                    {name: "RPM Changes", mime: "text/x-rpm-changes"},
                    {name: "RPM Spec", mime: "text/x-rpm-spec"},
                    {name: "Ruby", mime: "text/x-ruby"},
                    {name: "Rust", mime: "text/x-rustsrc"},
                    {name: "SAS", mime: "text/x-sas"},
                    {name: "Sass", mime: "text/x-sass"},
                    {name: "Scala", mime: "text/x-scala"},
                    {name: "Scheme", mime: "text/x-scheme"},
                    {name: "SCSS", mime: "text/x-scss"},
                    {name: "Shell", mime: "text/x-sh"},
                    {name: "Sieve", mime: "application/sieve"},
                    {name: "Slim", mime: "text/x-slim"},
                    {name: "Smalltalk", mime: "text/x-stsrc"},
                    {name: "Smarty", mime: "text/x-smarty"},
                    {name: "Solr", mime: "text/x-solr"},
                    {name: "Soy", mime: "text/x-soy"},
                    {name: "SPARQL", mime: "application/sparql-query"},
                    {name: "Spreadsheet", mime: "text/x-spreadsheet"},
                    {name: "SQL", mime: "text/x-sql"},
                    {name: "SQLite", mime: "text/x-sqlite"},
                    {name: "Squirrel", mime: "text/x-squirrel"},
                    {name: "Stylus", mime: "text/x-styl"},
                    {name: "Swift", mime: "text/x-swift"},
                    {name: "sTeX", mime: "text/x-stex"},
                    {name: "LaTeX", mime: "text/x-latex"},
                    {name: "SystemVerilog", mime: "text/x-systemverilog"},
                    {name: "Tcl", mime: "text/x-tcl"},
                    {name: "Textile", mime: "text/x-textile"},
                    {name: "TiddlyWiki ", mime: "text/x-tiddlywiki"},
                    {name: "Tiki wiki", mime: "text/tiki"},
                    {name: "TOML", mime: "text/x-toml"},
                    {name: "Tornado", mime: "text/x-tornado"},
                    {name: "troff", mime: "text/troff"},
                    {name: "TTCN", mime: "text/x-ttcn"},
                    {name: "TTCN_CFG", mime: "text/x-ttcn-cfg"},
                    {name: "Turtle", mime: "text/turtle"},
                    {name: "TypeScript", mime: "application/typescript"},
                    {name: "TypeScript-JSX", mime: "text/typescript-jsx"},
                    {name: "Twig", mime: "text/x-twig"},
                    {name: "Web IDL", mime: "text/x-webidl"},
                    {name: "VB.NET", mime: "text/x-vb"},
                    {name: "VBScript", mime: "text/vbscript"},
                    {name: "Velocity", mime: "text/velocity"},
                    {name: "Verilog", mime: "text/x-verilog"},
                    {name: "VHDL", mime: "text/x-vhdl"},
                    {name: "Vue.js Component", mime: "script/x-vue"},
                    {name: "XML", mime: "application/xml"},
                    {name: "XQuery", mime: "application/xquery"},
                    {name: "Yacas", mime: "text/x-yacas"},
                    {name: "YAML", mime: "text/x-yaml"},
                    {name: "Z80", mime: "text/x-z80"},
                    {name: "mscgen", mime: "text/x-mscgen"},
                    {name: "xu", mime: "text/x-xu"},
                    {name: "msgenny", mime: "text/x-msgenny"}
                ],
                tableData:{}
			}
		},
        created(){
            this.$bus.emit('updateMainMenuActive',this.$route.fullPath);
            //获取配置信息
            this.fetch('/home/app/auth/class').then(res=>{
                if(res&&res.data.data&&res.data.code){
                    this.configData = res.data.data;
                }
            })
            //数据表
            this.fetch('/home/app/auth/info/class/table').then(res=>{
                if(res&&res.data.data&&res.data.code){
                    this.tableData = res.data.data;
                }
            })
            this.getData();
        },
		methods:{
            getData(){
                this.fetch('/home/app/engine/function?page='+this.currentPage).then(res=>{
                    if(res&&res.data.data&&res.data.code){
                        this.funData = res.data.data.data;
                        this.pagination = res.data.data.pagination;
                        this.engine = res.data.data.engine;
                    }
                })
            },
            changePage(page){
                this.currentPage = page;
                this.getData();
            },
            //开通云引擎
            openEngine(){
                this.fetch('/home/app/engine/switch?engine=1').then(res=>{
                    if(res&&res.data.data){
                        this.getData();
                    }
                })
            },
            edit(row){
                this.modal = true;
                this.editId = row.id;
                this.fetch('/home/app/engine/function/'+row.id+'/type/'+row.type).then(res=>{
                    if(res&&res.data.data){
                        let data = res.data.data;
                        this.formItem.name = data.name;
                        this.formItem.classId = data.class_id;
                        this.body = data.body;
                        this.formItem.remark = data.remark;
                        this.formItem.table = data.table;
                        this.funType = row.type;
                        // this.formItem.argv = data.argv;
                    }
                })
            },
            //删除
            del(row){
                this.$Modal.confirm({
                    title: '提示',
                    content: '<p>确定删除吗？若删除该函数，则对应的计划任务也会删除！</p>',
                    onOk: () => {
                        this.fetch('/home/app/engine/function/delete',{
                            id:row.id,
                            type:row.type
                        }).then(res=>{
                            if(res&&res.data.data&&res.data.code){
                                this.$Message.success('删除成功')
                                this.getData();
                            }
                        })
                    }
                });
            },
			addFun(){
				this.modal = true;
                this.editId = 0;
                this.formItem.classId = '';
                this.formItem.name = '';
                this.body = '';
                this.formItem.remark = '';
                this.formItem.table = '';
                this.funType = 'Function';
                // this.formItem.argv = '';
			},
			cancel(){
                this.modal = false;
			},
			sure(){
                let url = '';
                if(this.funType == 'Function'){
                    url = '/home/app/engine/function/add';
                    if(!this.formItem.classId){
                        this.$Message.warning('请选择分组');
                        return;
                    }
                    if(!this.formItem.name){
                        this.$Message.warning('请填写函数名称');
                        return;
                    }
                }else if(this.funType == 'Hook'){
                    url = '/home/app/engine/hook/add';
                    if(!this.formItem.classId){
                        this.$Message.warning('请选择分组');
                        return;
                    }
                }else{
                    url = '/home/app/engine/global/add';
                }
                
                if(!this.body){
                    this.$Message.warning('请填写代码');
                    return;
                }
                let data = {
                    body:this.body,
                    remark:this.formItem.remark,
                }
                if(this.funType == 'Hook'){
                    data.table = this.formItem.table;
                    data.classId = this.formItem.classId;
                }else if(this.funType == 'Function'){
                    data.name = this.formItem.name
                    data.classId = this.formItem.classId;
                }
                // else{
                //     data.name = this.formItem.name;
                //     data.argv = this.formItem.argv.replace(/\s+/g, "");
                // }
                if(this.editId){
                    data.id = this.editId
                }
				this.fetch(url,data).then(res=>{
                    if(res&&res.data.data&&res.data.code){
                        this.getData()
                        this.modal = false;
                    }
                })
			},
            expandCode(){
                this.code_modal = true;
                this.font = '20px';
            },
            codeCancel(){
                this.code_modal = false
            },
            selectTheme(name){
                this.editorOptions.theme = this.theme = name;
            },
            //字体大小
            fontSizes(name){
                this.font = this.$refs.codemirrors.style.fontSize = name;
            },
            selectLanguage(name){
                 this.editorOptions.mode = name;
                 for(let key in this.languageData){
                    if(this.languageData[key].mime == name){
                        this.language = this.languageData[key].name;
                    }
                 }
            }
		}
	}
</script>
<style type="text/css">
    .code-modal{
        position:fixed;
        top:0;
        left:0;
        bottom:0px;
        right:0;
        z-index:10000;
        background:#272822
    }
    .CodeMirror{
        height: 100%!important;
        /*font-size: 20px!important;*/
    }
    .codemirror {
        font-size:20px;
        height:100%;
        padding-top: 64px;
        position: relative;
    }
    .CodeMirror pre{
        padding:5px 8px;
        /*line-height: 1;*/
    }
    .CodeMirror-linenumber{
        padding:5px;
    }
    .CodeMirror-hscrollbar{
        left:0!important;
    }
    .func-name{
        width:100px;
        border-bottom: 1px solid #d7dde4;
        margin:0 8px;
        color:#657180;
        text-align: center;
    }
    .theme-select .ivu-select-item{
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .codemirror-head{
        width: 100%;
        height:64px;
        line-height: 4px;
        padding:0 30px;
        position: absolute;
        top:0;
        background:#06a0fd;
    }
    .codemirror-head-dropdown{
        margin-right: 40px;
        line-height: 64px;
        cursor:pointer;
    }
    .codemirror-head-icon{
        margin-right: 10px;
        color:rgba(255,255,255,0.8);
        font-size: 20px!important;
        vertical-align: middle;
    }
    .codemirror-head-dropdownmenu{
        width:140px;
        max-height:400px;
        overflow-y:auto;
        overflow-x:hidden
    }
    .icon-closed{
        font-size:28px!important;
        line-height: 64px;
        cursor:pointer;
        color:#fff;
        float:right;
    }
</style>


